<template>
  <el-container>
    <el-header height="1">
      <venus-steps
        :active="step.active"
        :step-data="step.stepData"
      />
    </el-header>
    <el-main>
      <prod-assemble-info v-show="step.active === 1" edit-mod="MODI" />
      <prod-base-info v-show="step.active === 2" edit-mod="MODI" />
      <prod-sale-info v-show="step.active === 3" edit-mod="MODI" />
      <prod-c-c-d-c-info v-show="step.active === 4" edit-mod="MODI" />
      <prod-monitor-info v-show="step.active === 5" edit-mod="MODI" />
      <prod-fee-page v-show="step.active === 6" edit-mod="MODI" />
      <prod-open-days-info v-show="step.active === 7" edit-mod="MODI" />
      <prod-performence-info v-show="step.active === 8" edit-mod="MODI" />
      <prod-val-plan-info v-show="step.active === 9" edit-mod="MODI" />
      <prod-disclosure-plan-info v-show="step.active === 10" edit-mod="MODI" />
    </el-main>
    <el-footer>
      <el-button type="success" @click="before">上一步</el-button>
      <el-button type="success" @click="next">下一步</el-button>
      <el-button v-show="step.active === step.stepData.length" type="success">保存</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  import prodAssembleInfo from '@/views/page/M8/prod/info/prodAssembleInfo'
  import prodBaseInfo from '@/views/page/M8/prod/info/prodBaseInfo'
  import prodSaleInfo from '@/views/page/M8/prod/info/prodSaleInfo'
  import prodCCDCInfo from '@/views/page/M8/prod/info/prodCCDCInfo'
  import prodMonitorInfo from '@/views/page/M8/prod/info/prodMonitorInfo'
  import prodFeePage from '@/views/page/M8/prod/info/prodFeePage'
  import prodOpenDaysInfo from '@/views/page/M8/prod/info/prodOpenDaysInfo'
  import prodPerformenceInfo from '@/views/page/M8/prod/info/prodPerformenceInfo'
  import prodValPlanInfo from '@/views/page/M8/prod/info/prodValPlanInfo'
  import prodDisclosurePlanInfo from '@/views/page/M8/prod/info/prodDisclosurePlanInfo'

  export default {
    components: {
      prodAssembleInfo, prodBaseInfo, prodDisclosurePlanInfo, prodSaleInfo, prodCCDCInfo,
      prodMonitorInfo, prodFeePage, prodOpenDaysInfo,
      prodPerformenceInfo, prodValPlanInfo
    },
    data() {
      return {
        activeName: 'setting',
        step: {
          active: 1,
          stepData: ['组装产品', '基本信息', '时间/销售范围', '中债登数据元', '产品报备数据', '费用管理', '开放日管理', '业绩报酬', '估值计划', '披露计划']
        }
      }
    },
    methods: {
      handleClick(tab, event) {
      },
      next() {
        if (this.step.active < this.step.stepData.length) {
          this.step.active++
        }
      },
      before() {
        if (this.step.active > 1) {
          this.step.active--
        }
      }
    }
  }
</script>
